<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition template="/layouts/default.xhtml">
	<ui:define name="title">#{text['menu.top.recettes']}</ui:define>
	<ui:param name="menu" value="RecettesMenu" />
	
	<ui:define name="body">
		<script type="text/javascript">
			function exportEtatMensuel() { 
			    //export image  
			    $('#outputEtatMensuel').empty().append(PF('chartEtatMensuel').exportAsImage());  
			  
			    //show the dialog  
			    PF('dlgEtatMensuel').show();  
			}
			
			function exportEtatTotal() { 
			    //export image  
			    $('#outputEtatTotal').empty().append(PF('chartEtatTotal').exportAsImage());  
			  
			    //show the dialog  
			    PF('dlgEtatTotal').show();  
			}
	    </script>
		<div class="col-sm-12">
			<div class="page-header">
					<h3>#{text['recette.title.header']} #{appController.anneeScolaire.anneeScolaire}</h3>
			</div>
				<p:dataTable rendered="false" />
				<div class="col-sm-12">
					<div class="row">
	                	<p:barChart id="etatMensuel" widgetVar="chartEtatMensuel" value="#{paiementController.categoryModelRecettes}" seriesColors="2288AA,10E8A0,E8104D" animate="true" legendPosition="ne" style="height:300px"  
	            			title="#{text['recette.etat.paiement.mensuel']}" stacked="true" barMargin="10" min="0"/>
	            			
	            		<p:commandButton type="button" value="Export" icon="ui-icon-extlink" onclick="exportEtatMensuel()"/>  
  
						<p:dialog widgetVar="dlgEtatMensuel" showEffect="fade" modal="true" header="#{text['recette.etat.paiement.mensuel']}">  
						    <p:outputPanel id="outputEtatMensuel" layout="block" style="width:100%;height:400px"/>  
						</p:dialog> 
	            	</div>
	            	
	            	<br/>
		            	
					<div class="row">
						<div class="col-sm-3"/>
						<div class="col-sm-6">
							<p:pieChart id="etatTotal" widgetVar="chartEtatTotal" value="#{paiementController.pieModelRecettes}" legendPosition="s" fill="true" showDataLabels="true"  
		                	title="#{text['recette.pie.title']}" style="width:100%;height:400px" sliceMargin="5" diameter="250" />
		                	
		                	<p:commandButton type="button" value="Export" icon="ui-icon-extlink" onclick="exportEtatTotal()"/>  
  
							<p:dialog widgetVar="dlgEtatTotal" showEffect="fade" modal="true" header="#{text['recette.pie.title']}">  
							    <p:outputPanel id="outputEtatTotal" layout="block" style="width:100%;height:400px"/>  
							</p:dialog> 
						</div>
						<div class="col-sm-3"/>
	                </div>
	            </div> 
		</div>
	</ui:define>
</ui:composition>
</html>